<template>
  <div class="home-page">
    <!-- 频道导航栏 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <ArticleList
          @openP="openP"
          :channel_id="item.id"
          ref="articleList"
        ></ArticleList>
      </van-tab>
    </van-tabs>
    <!-- 频道管理按钮 -->
    <div
      class="channelManage"
      @click="openChannel"
      v-if="$store.state.tokenInfo.token"
    >
      <van-icon name="apps-o" />
    </div>
    <!-- 频道管理上拉面板 -->
    <van-action-sheet v-model="showChannels" title="编辑频道" class="height">
      <EditChannel
        :channels="channels"
        :activeIndex="active"
        @aList="aList"
      ></EditChannel>
    </van-action-sheet>
    <!-- 弹出层 -->
    <van-popup v-model="show" class="pop">
      <MoreAction
        @report="report"
        @dislikeArticle="dislikeArticle"
        ref="more"
      ></MoreAction>
    </van-popup>
  </div>
</template>
<script>
import { getUserChannel } from "@/api/channels.js";
// 引入文章列表组件
import ArticleList from "@/views/Home/articleList.vue";
// 引入moreAction组件
import MoreAction from "@/views/Home/moreAction.vue";
// 引入不喜欢文章的接口
import { dislike, delReportArticle } from "@/api/article.js";
// 引入编辑频道组件
import EditChannel from "./editChannel.vue";
export default {
  data() {
    return {
      channels: [],
      active: 0, //当前激活的频道下标
      show: false, //弹出层
      art_id: null,
      channel_id: null,
      showChannels: false
    };
  },
  components: {
    ArticleList,
    MoreAction,
    EditChannel
  },
  methods: {
    // 获取频道列表
    hgetChannel() {
      getUserChannel()
        .then(res => {
          console.log(res);
          this.channels = res.data.data.channels;
          this.channel_id = this.channels[this.active].id;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 打开弹层
    openP(art_id) {
      // 打开弹层
      this.show = true;
      this.art_id = art_id;
      // 始终让不感兴趣列表显示
      // this.$refs.more.show = true;
      // console.log(this.$refs);
      // 弹层首次打开时拿不到子组件的，需要加判断进行容错处理
      if (this.$refs.more) {
        this.$refs.more.show = true;
      }
    },
    // 删除本地list的对应文章
    deleteArt() {
      this.$eventBus.$emit("delArt", this.channel_id, this.art_id);
    },
    // 不喜欢的文章处理
    async dislikeArticle() {
      try {
        // 调接口删除后端数据
        const res = await dislike(this.art_id);
        console.log(res);
        // 删除对应的本地渲染数据
        // 把当前频道id和文章id作为参数传给moreActive子组件
        // console.log("频道id",channelID);
        // console.log(this.$refs);
        // 调用子组件的方法，删除当前文章的数据
        // this.$refs.articleList[0].delArticle(channelID,this.art_id);
        this.deleteArt();
        this.$toast.success("删除成功");
      } catch (err) {
        console.log(err);
        this.$toast.fail("删除失败");
      }
      // 关闭弹框
      this.show = false;
    },
    // 删除举报的文章
    async report(type) {
      try {
        const res = await delReportArticle({
          target: this.art_id,
          type: type
        });
        console.log(res);
        // 删除本地list对应的文章
        this.deleteArt();
        this.$toast.success("举报成功");
      } catch (err) {
        console.log(err);
        this.$toast.fail("举报失败");
      }
      // 关闭弹框
      this.show = false;
    },
    // 打开频道管理
    openChannel() {
      this.showChannels = true;
    },
    // 我的频道同步高亮当前组件的tab栏
    aList(channelIndex) {
      this.active = channelIndex;
      // 关闭频道管理
      this.showChannels = false;
    }
  },
  created() {
    // 页面一刷新就获取频道列表渲染到页面
    this.hgetChannel();
  },
  watch: {
    active(value) {
      this.channel_id = this.channels[value].id;
      // console.log(this.channel_id,"监听频道id");
    }
  }
};
</script>
<style lang="less" scoped>
.home-page {
  margin-top: 50px;
}
.pop {
  width: 80%;
}
.channelManage {
  position: absolute;
  top: 50px;
  right: 0px;
  width: 40px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background-color: #fff;
}
.height {
  height: 100%;
  .van-action-sheet__header {
    background-color: #1989fa;
    color: #fff;
    .van-action-sheet__close {
      color: #fff;
    }
  }
}
</style>
